<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RoleRealm - 我的收藏</title>
    <link rel="stylesheet" href="/css/style.css">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'PingFang SC', 'Inter', sans-serif; background: #f8fafc; min-height: 100vh; }
        .header { background: white; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); padding: 15px 0; position: sticky; top: 0; z-index: 100; }
        .header-content { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; }
        .logo { color: #1e3a8a; font-size: 24px; font-weight: bold; cursor: pointer; }
        .header-actions { display: flex; gap: 15px; }
        .header-btn { padding: 8px 16px; border: none; border-radius: 20px; background: #f8fafc; color: #1e3a8a; cursor: pointer; font-size: 14px; transition: all 0.3s ease; }
        .header-btn:hover { background: #e5e7eb; }
        .main-container { max-width: 1200px; margin: 0 auto; padding: 20px; }
        .page-title { font-size: 28px; font-weight: bold; color: #1e3a8a; margin-bottom: 20px; text-align: center; }
        .favorites-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
        .favorite-card { background: white; border-radius: 15px; padding: 20px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); transition: all 0.3s ease; }
        .favorite-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); }
        .favorite-avatar { width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, #3b82f6, #1e3a8a); display: flex; align-items: center; justify-content: center; color: white; font-size: 32px; font-weight: bold; margin: 0 auto 15px; }
        .favorite-name { font-size: 18px; font-weight: bold; color: #1e3a8a; text-align: center; margin-bottom: 8px; }
        .favorite-description { font-size: 14px; color: #6b7280; text-align: center; margin-bottom: 15px; line-height: 1.5; min-height: 40px; }
        .favorite-tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 15px; }
        .favorite-tag { padding: 4px 8px; background: #f1f5f9; color: #475569; border-radius: 12px; font-size: 11px; }
        .favorite-actions { display: flex; gap: 8px; }
        .remove-favorite-btn { padding: 8px 12px; border: 2px solid #ef4444; border-radius: 8px; background: white; color: #ef4444; cursor: pointer; transition: all 0.3s ease; font-size: 12px; }
        .remove-favorite-btn:hover { background: #ef4444; color: white; }
        .start-chat-btn { flex: 1; padding: 10px; background: #f59e0b; color: white; border: none; border-radius: 10px; font-size: 14px; font-weight: bold; cursor: pointer; transition: all 0.3s ease; }
        .start-chat-btn:hover { background: #d97706; }
        .empty-state { text-align: center; padding: 60px 20px; color: #6b7280; }
        .empty-state-icon { font-size: 64px; margin-bottom: 20px; }
        .empty-state-title { font-size: 20px; font-weight: bold; margin-bottom: 10px; color: #374151; }
        .empty-state-desc { font-size: 14px; margin-bottom: 20px; }
        .empty-state-btn { padding: 12px 24px; background: #3b82f6; color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; transition: all 0.3s ease; }
        .empty-state-btn:hover { background: #1e3a8a; }
        .loading { text-align: center; padding: 40px; color: #6b7280; }
        @media (max-width: 768px) {
            .main-container { padding: 10px; }
            .favorites-grid { grid-template-columns: 1fr; }
        }
    </style>
    <script src="/js/api.js"></script>
    <script src="/js/auth.js"></script>
</head>
<body>
    <header class="header">
        <div class="header-content">
            <div class="logo" onclick="location.href='/'">RoleRealm</div>
            <div class="header-actions">
                <button class="header-btn" onclick="location.href='/character-selection.html'">角色选择</button>
                <button class="header-btn" onclick="location.href='/user-settings.html'">设置</button>
                <button class="header-btn" onclick="Auth.logout()">退出</button>
            </div>
        </div>
    </header>

    <div class="main-container">
        <h1 class="page-title">我的收藏</h1>
        <div id="favoritesContainer">
            <div class="loading">加载中...</div>
        </div>
    </div>

    <script>
        Auth.requireAuth();

        const container = document.getElementById('favoritesContainer');

        function avatarFromName(name) {
            return name ? name[0] : '角';
        }

        function tagPills(character) {
            const tags = [];
            if (character.category) tags.push(character.category);
            if (character.skillType) tags.push(character.skillType);
            return tags.map(t => `<span class="favorite-tag">${t}</span>`).join('');
        }

        async function loadFavorites() {
            try {
                container.innerHTML = '<div class="loading">加载中...</div>';
                
                const data = await UsersApi.favorites(1, 100);
                const list = data.list || data.records || data.items || [];
                
                if (list.length === 0) {
                    container.innerHTML = `
                        <div class="empty-state">
                            <div class="empty-state-icon">❤️</div>
                            <div class="empty-state-title">还没有收藏任何角色</div>
                            <div class="empty-state-desc">去角色选择页面发现你喜欢的角色吧！</div>
                            <button class="empty-state-btn" onclick="location.href='/character-selection.html'">去选择角色</button>
                        </div>
                    `;
                    return;
                }

                container.innerHTML = '<div class="favorites-grid" id="favoritesGrid"></div>';
                const grid = document.getElementById('favoritesGrid');

                list.forEach(character => {
                    const card = document.createElement('div');
                    card.className = 'favorite-card';
                    card.innerHTML = `
                        <div class="favorite-avatar">${avatarFromName(character.characterName)}</div>
                        <h3 class="favorite-name">${character.characterName || '未知角色'}</h3>
                        <p class="favorite-description">${(character.description || '').slice(0, 80)}</p>
                        <div class="favorite-tags">${tagPills(character)}</div>
                        <div class="favorite-actions">
                            <button class="remove-favorite-btn" data-character-id="${character.characterId}">移除收藏</button>
                            <button class="start-chat-btn">开始对话</button>
                        </div>
                    `;

                    // 移除收藏按钮事件
                    card.querySelector('.remove-favorite-btn').addEventListener('click', async (e) => {
                        e.stopPropagation();
                        if (confirm('确定要移除这个收藏吗？')) {
                            try {
                                await UsersApi.removeFavorite(character.characterId);
                                card.remove();
                                // 检查是否还有收藏，如果没有则显示空状态
                                if (grid.children.length === 0) {
                                    container.innerHTML = `
                                        <div class="empty-state">
                                            <div class="empty-state-icon">❤️</div>
                                            <div class="empty-state-title">还没有收藏任何角色</div>
                                            <div class="empty-state-desc">去角色选择页面发现你喜欢的角色吧！</div>
                                            <button class="empty-state-btn" onclick="location.href='/character-selection.html'">去选择角色</button>
                                        </div>
                                    `;
                                }
                            } catch (err) {
                                alert(err.message || '移除收藏失败');
                            }
                        }
                    });

                    // 开始对话按钮事件
                    card.querySelector('.start-chat-btn').addEventListener('click', async (e) => {
                        e.stopPropagation();
                        try {
                            const conv = await ConversationsApi.create({ 
                                characterId: character.characterId, 
                                title: character.characterName 
                            });
                            const conversationId = conv.id || conv.conversationId;
                            location.href = `/chat.html?conversationId=${conversationId}&characterId=${character.characterId}`;
                        } catch (err) {
                            alert(err.message || '创建会话失败');
                        }
                    });

                    grid.appendChild(card);
                });
            } catch (err) {
                console.error('加载收藏失败:', err);
                container.innerHTML = `
                    <div class="empty-state">
                        <div class="empty-state-icon">❌</div>
                        <div class="empty-state-title">加载失败</div>
                        <div class="empty-state-desc">${err.message || '请稍后重试'}</div>
                        <button class="empty-state-btn" onclick="location.reload()">重新加载</button>
                    </div>
                `;
            }
        }

        // 页面加载时获取收藏列表
        (async function init() {
            await loadFavorites();
        })();
    </script>
</body>
</html>
